﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="EwcControlTest.Test" %>
<%@ Register Assembly="EnhancedWebControls" Namespace="EnhancedWebControls" TagPrefix="ewc" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
        .overlayClass
        {
	        position:relative;
	        background-color:white; 
            filter:alpha(opacity=65); 
            opacity:0.65;
        }
        .contentClass
        {
            float:left;
            clear:both;
            width:600px;
            border:solid 1px black;
            padding:9px;
            background-color:#9999FF;
        }
        .messageClass
        {
            float:left;
            clear:both;
            width: 100px;
            padding:20px;
            border:solid 1px black;
            background-color:#EEEEEE;
            text-align:center;            
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <asp:UpdatePanel ID="updatePanel2" runat="server">
        <ContentTemplate>
            <script type="text/javascript" language="javascript">
                var _modalEventArgsArray;
                var _modalEventQueue;
                Sys.Application.add_init(InitModalLoading);

                function ModalEventArgs(clientId, uniqueId, containerDiv, contentDiv, progressDiv, hideDropDowns, verticalPositionRatio) {
                    this.ClientId = clientId;
                    this.UniqueId = uniqueId;
                    this.ContainerDiv = containerDiv;
                    this.ContentDiv = contentDiv;
                    this.ProgressDiv = progressDiv;
                    this.HideDropDowns = hideDropDowns;
                    this.VerticalPositionRatio = verticalPositionRatio;
                }
                function AddModalEventArgs(clientId, uniqueId, containerDiv, contentDiv, progressDiv, hideDropDowns, verticalPositionRatio) {
                    VerifyEventArray();
                    _modalEventArgsArray[_modalEventArgsArray.length] = new ModalEventArgs(clientId, uniqueId, containerDiv, contentDiv, progressDiv, hideDropDowns, verticalPositionRatio);
                }
                function FindModalEventArgs(clientId) {
                    VerifyEventArray();
                    for (var i = 0; i < _modalEventArgsArray.length; i++) {
                        if (_modalEventArgsArray[i].ClientId == clientId) {
                            return _modalEventArgsArray[i];
                        }
                    }
                    return null;
                }
                function VerifyEventArray() {
                    if (_modalEventArgsArray == null) {
                        _modalEventArgsArray = new Array();
                    }
                }
                function VerifyEventQueue() {
                    if (_modalEventQueue == null) {
                        _modalEventQueue = new Array();
                    }
                }
                function Modalize(elem) {
                    VerifyEventArray();
                    var eventArgs = FindModalEventArgs(elem.id);
                    if (eventArgs != null) {
                        var containerDiv = $get(eventArgs.ContainerDiv);
                        var overlayDiv = $get(eventArgs.ContainerDiv + "_OverlayDiv");
                        var messageDiv = $get(eventArgs.ContainerDiv + "_MessageDiv");
                        var contentDiv = $get(eventArgs.ContentDiv);

                        containerDiv.style.display = '';
                        overlayDiv.style.display = '';
                        messageDiv.style.display = '';

                        if (eventArgs.HideDropDowns == true) {
                            var inputElems = _contentDiv.getElementsByTagName('select');
                            for (var i = 0; i < inputElems.length; i++) {
                                if (inputElems[i] != null) {
                                    inputElems[i].style.display = 'none';
                                }
                            }
                        }

                        var contentBounds = Sys.UI.DomElement.getBounds(contentDiv);
                        var messageBounds = Sys.UI.DomElement.getBounds(messageDiv);
                        var containerBounds = Sys.UI.DomElement.getBounds(containerDiv);
                        var vertRatio = .5;
                        if ((eventArgs.VerticalPositionRatio != null) && (eventArgs.VerticalPositionRatio >= 0.0)) {
                            vertRatio = eventArgs.VerticalPositionRatio;
                        }
                        var x = contentBounds.x + Math.round(contentBounds.width / 2) - Math.round(messageBounds.width / 2);
                        var y = contentBounds.y + Math.round(contentBounds.height * vertRatio) - Math.round(messageBounds.height / 2);

                        overlayDiv.style.width = contentBounds.width + 'px';
                        overlayDiv.style.height = contentBounds.height + 'px';
                        
                        Sys.UI.DomElement.setLocation(overlayDiv, contentBounds.x - containerBounds.x, contentBounds.y - containerBounds.y);
                        Sys.UI.DomElement.setLocation(messageDiv, x - containerBounds.x, y - containerBounds.y);

                        if (eventArgs.ProgressDiv != null) {
                            var progressDiv = $get(eventArgs.ProgressDiv);
                            progressDiv.style.visibility = 'hidden';
                            progressDiv.style.display = 'none';
                        }
                    }
                }
                function InitModalLoading() {
                    var prm = Sys.WebForms.PageRequestManager.getInstance();
                    if (prm != null) {
                        prm.add_initializeRequest(InitModalLoadRequest);
                        prm.add_endRequest(EndModalLoadRequest);
                    }
                }
                function EndModalLoadRequest(sender, args) {
                    VerifyEventArray();
                    for (var i = 0; i < _modalEventArgsArray.length; i++) {
                        var containerDiv = $get(_modalEventArgsArray[i].ContainerDiv);
                        var overlayDiv = $get(_modalEventArgsArray[i].ContainerDiv + "_OverlayDiv");
                        var messageDiv = $get(_modalEventArgsArray[i].ContainerDiv + "_MessageDiv");
                        containerDiv.style.display = 'none';
                        overlayDiv.style.display = 'none';
                        messageDiv.style.display = 'none';
                        if (_modalEventArgsArray[i].ProgressDiv != null) {
                            $get(_modalEventArgsArray[i].ProgressDiv).style.visibility = '';
                        }
                    }
                    VerifyEventQueue();
                    if (_modalEventQueue.length > 0) {
                        __doPostBack(_modalEventQueue[0], '');
                        Array.removeAt(_modalEventQueue, 0);
                    }

                }
                function InitModalLoadRequest(sender, args) {
                    var prm = Sys.WebForms.PageRequestManager.getInstance();
                    var elem = args.get_postBackElement();
                    Modalize(elem);
                    if (prm.get_isInAsyncPostBack()) {
                        VerifyEventArray();
                        var eventArgs = FindModalEventArgs(elem.id);
                        if (eventArgs != null) {
                            VerifyEventQueue();
                            Array.add(_modalEventQueue, eventArgs.UniqueId);                
                        }
                        args.set_cancel(true);
                    }
                }
            </script>
            <div id="Div1" class="contentClass">
                <div id="outer1" style="position:absolute;display:none;">    
                    <div id="outer1_OverlayDiv" class="overlayClass" style="display:none;"></div>
                    <div id="outer1_MessageDiv" class="messageClass" style="display:none;">Loading</div>
                </div>
                <asp:LinkButton ID="LinkButton1" runat="server" onclick="TestPanel1_Click">Test1</asp:LinkButton>&nbsp;
                <asp:LinkButton ID="LinkButton2" runat="server" onclick="TestPanel1_Click">Test2</asp:LinkButton>&nbsp;
                <asp:LinkButton ID="LinkButton3" runat="server" onclick="TestPanel1_Click">Test3</asp:LinkButton>&nbsp;
                <asp:Label ID="Label1" runat="server"></asp:Label><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat nulla sed dui facilisis non imperdiet felis viverra. Aliquam aliquet tellus felis. Nullam rutrum massa in ante euismod sodales. Maecenas viverra libero non ipsum ultrices nec pretium purus pharetra. Nullam suscipit nibh eu nunc sollicitudin eget dictum nisl bibendum. Donec pretium odio sit amet mauris dignissim volutpat. Morbi ante ante, molestie id facilisis nec, condimentum laoreet velit. Maecenas tempor sem vel ante condimentum ut posuere nunc condimentum. Morbi libero ipsum, pulvinar et imperdiet id, blandit nec libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultrices mollis ultricies. Duis rhoncus urna neque. Quisque quis neque diam. Fusce faucibus auctor felis, nec posuere leo vestibulum a. Ut eu nisl quis metus eleifend molestie. Curabitur non tortor tortor. Mauris ante lorem, euismod quis adipiscing quis, tristique ut urna. Donec ipsum nisl, hendrerit malesuada pharetra ac, ultrices nec nulla. Nullam at libero vulputate dui hendrerit malesuada. Cras eu tellus urna. </p>
            </div>
            <div id="content2" class="contentClass" style="margin:10px 0px 0px 0px;">
                <div id="outer2" style="position:absolute;">   
                    <div id="outer2_OverlayDiv" class="overlayClass" style="display:none;"></div>
                    <div id="outer2_MessageDiv" class="messageClass" style="display:none;">Loading</div>
                </div>
                <asp:LinkButton ID="LinkButton4" runat="server" onclick="TestPanel2_Click">Test4</asp:LinkButton>&nbsp;
                <asp:Label ID="Label1" runat="server"></asp:Label><br />
                <p>Duis nisi lorem, placerat non auctor a, porta at purus. Ut nec nisl sem, a vestibulum orci. Nullam scelerisque sapien ut lectus tempus non gravida turpis aliquet. Morbi pretium iaculis elit, a mattis est mattis ac. Morbi laoreet enim id enim dignissim ultrices id et tortor. Aliquam posuere neque vel ipsum cursus in convallis quam scelerisque. Quisque suscipit, orci at convallis mattis, velit est fermentum lectus, nec condimentum ipsum dolor non enim. Maecenas diam metus, vestibulum ac interdum eu, condimentum ut tortor. Nunc ut est sed nibh porttitor feugiat eu a est. Proin tempor lacus in libero rhoncus sed adipiscing diam gravida. </p>
            </div>
            <script type="text/javascript">
                AddModalEventArgs('<%= LinkButton1.ClientID %>', '<%= LinkButton1.UniqueID %>', "outer1", "content1", null, false, .25);
                AddModalEventArgs('<%= LinkButton2.ClientID %>', '<%= LinkButton2.UniqueID %>', "outer1", "content1", null, false, .75);
                AddModalEventArgs('<%= LinkButton3.ClientID %>', '<%= LinkButton3.UniqueID %>', "outer1", "content1", null, false, 0);
                AddModalEventArgs('<%= LinkButton4.ClientID %>', '<%= LinkButton4.UniqueID %>', "outer2", "content2", null, false, .5);
            </script>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>
